<template>
  <div id="shop-item">
    <div class="item-selector">
      <!-- 直接监听组件点击 @click.native -->
      <check-button
        :is-checked="itemInfo.checked"
        @click.native="checkClick"
      ></check-button>
    </div>
    <div class="item-img">
      <img
        :src="itemInfo.image"
        alt="商品图片"
        onerror="图片加载失败"
        @load="imgLoad"
        @click="imgClick"
      />
    </div>
    <div class="item-info">
      <div class="item-title">{{ itemInfo.title }}</div>
      <div class="item-desc">{{ itemInfo.desc }}</div>
      <div class="info-bottom">
        <div class="item-price left">{{ "¥  " + itemInfo.price }}</div>
        <click-num
          @subtractClick="subtractClick"
          @addClick="addClick"
        ></click-num>
        <div class="item-count right">{{ itemInfo.count }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CheckButton from "components/content/checkButton/CheckButton.vue";
import ClickNum from "components/content/clickNum/ClickNum.vue";

export default {
  name: "CartListItem",
  props: {
    itemInfo: {
      type: Object,
      default() {
        return {};
      },
    },
    itemIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      goodsCount: [],
    };
  },
  components: {
    CheckButton,
    ClickNum,
  },
  methods: {
    checkClick() {
      this.itemInfo.checked = !this.itemInfo.checked;
    },

    // 购物数量减少按钮
    subtractClick() {
      // console.log(this.itemIndex);
      this.goodsCount = this.$store.state.cartList;

      // 拿到cartList数组中第itemIndex个商品 定位到他的数量
      if (this.goodsCount[this.itemIndex].count > 0) {
        this.goodsCount[this.itemIndex].count--;
      }

      // 当数量为零时移除该商品
      if (this.goodsCount[this.itemIndex].count === 0) {
        this.goodsCount.splice(this.itemIndex, 1);
        // console.log(this.goodsCount);
      }

      // 减少时 实时保存到内存中
      window.localStorage.setItem("cartList", JSON.stringify(this.$store.state.cartList));
    },
    addClick() {
      this.goodsCount = this.$store.state.cartList;
      this.goodsCount[this.itemIndex].count++;

      // 增加时 实时保存到内存中
      window.localStorage.setItem("cartList", JSON.stringify(this.$store.state.cartList));
    },
    imgLoad() {
      this.$emit("imgLoad");
    },
    imgClick() {
      this.$router.push(
        "/detail/" + this.$store.state.cartList[this.itemIndex].iid
      );
    },
  },
};
</script>

<style scoped>
#shop-item {
  width: 100%;
  display: flex;
  padding: 5px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  border-radius: 20px;
  margin-bottom: 10px;
  box-shadow: 4px 6px 10px #95a5a6;
}

.item-count,
.item-price {
  font-weight: bold;
  font-size: 16px;
  line-height: 13px;
}

.item-selector {
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-title,
.item-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-img {
  padding: 5px;
}

.item-img img {
  width: 80px;
  height: 100px;
  display: block;
  border-radius: 5px;
}

.item-info {
  font-size: 12px;
  color: #333;
  padding: 5px 10px;
  position: relative;
  overflow: hidden;
}

.item-info .item-desc {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

.info-bottom {
  margin-top: 10px;
  position: absolute;
  bottom: 10px;
  left: 11.66667vw;
  right: 14.66667vw;
}

.info-bottom .item-price {
  color: orangered;
}
</style>
